import Guide from '~/components/layout/guide'
import Snippet from '~/components/snippet'
import Caption from '~/components/text/caption'
import { InlineCode } from '~/components/text/code'
import Note from '~/components/text/note'
import Link from '~/components/text/link'
import { Image } from '~/components/media'
import DeploySection from '~/components/guides/deploy-section'

export const meta = {
  title: 'Create a Hugo Website and Deploy It with ZEIT Now',
  description: 'Create a Hugo website and deploy it live with ZEIT Now.',
  published: '2019-02-20T03:00:00.860Z',
  authors: ['unicodeveloper'],
  url: '/guides/deploying-hugo-with-now',
  example: 'hugo',
  demo: 'https://hugo.now-examples.now.sh',
  image:
    'https://og-image.now.sh/**Deploying%20Hugo%20Sites**%20%3Cbr%20%2F%3E%20with%20ZEIT%20Now.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fzeit-black-triangle.svg&images=https%3A%2F%2Fimg.stackshare.io%2Fservice%2F1158%2Fhugo-icon.png&widths=250&widths=300&heights=250&heights=300',
  editUrl: 'pages/guides/deploying-hugo-with-now.mdx',
  name: 'Hugo',
  type: 'site',
  lastEdited: '2020-02-04T12:49:00.000Z'
}

[Hugo](https://gohugo.io) is a very popular framework for creating static websites. It's fast and flexible.

In this guide, we will walk you through setting up a Hugo website and deploying it with [ZEIT Now](/).

## Step 1: Setting Up Your Hugo Project

To [get a Hugo project running](https://gohugo.io/getting-started/quick-start/), you need to install a precompiled binary on your machine. Hugo currently provides [pre-built binaries for macOS, Windows, and Linux](https://gohugo.io/getting-started/installing/).

Therefore, you can either download the appropriate version for your machine from the [GitHub releases](https://github.com/gohugoio/hugo/releases) or install it via your machine's package manager.

For macOS users, you can install Hugo via [Brew](https://brew.sh):

<Snippet dark text="brew install hugo" />
<Caption>Installing <Link href="https://gohugo.io/getting-started/installing/">Hugo CLI</Link> via <Link href="https://brew.sh/">Homebrew</Link>.</Caption>

For Windows users, you can install Hugo via [Chocolatey](https://chocolatey.org/):

<Snippet dark text="choco install hugo -confirm" />
<Caption>Installing <Link href="https://gohugo.io/getting-started/installing/">Hugo CLI</Link> via <Link href="https://chocolatey.org/">Chocolatey</Link>.</Caption>

Next, run the following command to create a Hugo project via the CLI:

<Snippet dark text="hugo new site my-hugo-project" />
<Caption>Creating a new Hugo project via the CLI.</Caption>

You can add a theme to beautify the newly created site. `cd` into the `my-hugo-project` directory and run the following command to add a [theme](https://themes.gohugo.io/):

<Snippet dark text="git init && git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke" />
<Caption>Download a new theme to the Hugo project.</Caption>

The next step is to activate the theme. From your terminal, add the [ananke](https://themes.gohugo.io/gohugo-theme-ananke/) theme to the `config.toml` file.

<Snippet dark text={`echo 'theme = "ananke"' >> config.toml`} />
<Caption>Edit your config.toml configuration file, and add the theme</Caption>

### Create Some Content

You can add some content to the Hugo project by running the following command:

<Snippet dark text="hugo new posts/my-first-post.md" />
<Caption>Creating a new post in the Hugo project via the CLI.</Caption>

Once you are done running the command, edit the `my-first-post.md` file (within the `contents/posts` directories) and add the following content below the generated metadata:

```markdown
## Deploying Hugo with ZEIT Now
```

You can now see your project running locally with the following command:

<Snippet dark text="hugo server -D" />
<Caption>Running the server locally with drafts enabled</Caption>

<Note>
  Before deploying, ensure the <InlineCode>draft</InlineCode> value in your{' '}
  <InlineCode>my-first-post.md</InlineCode> file is set to{' '}
  <InlineCode>false</InlineCode>. If it remains as <InlineCode>true</InlineCode>
  , the content of your posts won't show up in production.
</Note>

## Step 2: Deploying Your Hugo Website with ZEIT Now

<DeploySection meta={meta} />

## Optional: Defining a Hugo Version

If you want to use a specific version of Hugo, you can create a `now.json` file containing a`HUGO_VERSION` [build environment variable](/docs/v2/build-step#providing-environment-variables).

```json
{
  "build": {
    "env": {
      "HUGO_VERSION": "0.61.0"
    }
  }
}
```

<Caption>
  An optional <InlineCode>now.json</InlineCode> configuration file that selects
  Hugo version 0.61.0 for the build step.
</Caption>

export default ({ children }) => <Guide meta={meta}>{children}</Guide>

export const config = {
  amp: 'hybrid'
}
